<%- include('common/header.html') %>
<link rel="stylesheet" href="/index/css/index.css" />
<style>
  .pc_list {
    list-style: none;
  }

  .pc_list li {
    display: inline-block;
  }
</style>

<style>
  .swiper_button_banner {
    --swiper-navigation-color: #999999;
    outline: none
  }

  .swiper_button_banner .swiper-button-hidden {
    opacity: 0;
  }

  .swiper_button_banner .hide {
    opacity: 0;
  }

  .swiper-button-next,
  .swiper-button-prev {
    transition: opacity 0.5s;
  }

  .vc-carousel-data {
    padding-left: 22px;
  }

  .banner-index .swiper-wrapper {
    width: 100%;
    height: 800px;
  }

  .banner-index .swiper-wrapper img {
    width: 100%;
    height: 100%;
  }

  .about_banner_botton {
    width: 100%;
    /* background-color: red; */
  }

  /* .user_evaluation_content {
    /* width: 1903%;
    
  } */

  .user_evaluation {
    width: 1903px;
    /* user_evaluation */
    width: 100%;
  }

  .banner-index {
    overflow-x: hidden !important;
  }

  .user_evaluation {
    height: 627px;
  }

  .coverInfo {
    height: 388px;
  }

  .swiper {
    width: 100%;
    height: 100%;

  }

  .AI_solution {
    /* padding-top: 100px; */
    /* position: relative; */
    /* position: absolute; */
  }

  .swiper-slide {
    font-size: 13px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
  }

  .swiper-pagination-bullet-active {
    color: #fff;
    background: #5C697C;
  }

  .img_div {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
    border-radius: 150px;
  }

  .coverInfo .swiper .swiper-wrapper .swiper-slide {
    width: 100% !important;
    background-color: #67E1F4;

  }

  .user_evaluation .user_evaluation_content .qfe_wrapper {
    margin-bottom: 0
  }

  .banner-index .mybannerSwiper .swiper-wrapper {
    height: 638px;
  }

  .container .aside_navlist .aside_navlist_sheji .article_tit {
    color: #999999;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 10px;
  }
</style>

<!-- banner模块开始 -->

<div class="banner-index">
  <!-- 轮播图开始 -->
  <div class="swiper_button_banner mybannerSwiper">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide">
        <img src="/index/images/index-banner.webp" alt="" class="banner-index-img" />
      </div> -->
      <% banner.forEach(item => { %>
      <div class="swiper-slide">
        <img src="<%= item.banner_img %> " alt="<%= item.banner_name %>" title="<%= item.banner_name %>"
          class="banner-index-img" />
      </div>
      <% }) %>

    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
  <!-- 轮播图结束 -->

  <!-- <img src="./images/index-banner.webp" alt="" class="banner-index-img" /> -->
  <!-- <img src="./images/index-banner.webp" alt="" class="banner-index-img" /> -->
</div>
<!-- banner模块结束 -->
<div class="column_containter">
  <div class="vc_header w">
    <div class="qfe_wrapper center">
      <div class="blue_border-top"></div>
      <h2 class="header_title">
        <!-- 双目深度学习  产品 -->
        <ul class="pc_list">
          <% productClass.forEach(item => { %>
          <li><a href="/project?id=<%= item.pc_id %>"><%= item.pc_name %> </a></li>
          <% }) %>
        </ul>
      </h2>
      <p class="header_subtitle">让生活和省会更安全</p>
    </div>
    <div class="data-loading w">
      <ul class="vc-carousel-indicators">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">

            <% product.forEach(item => { %>
            <div class="swiper-slide">
              <li>
                <div class="vc-carousel-data">
                  <!-- <a href="/index/article.html"> -->
                  <a href="/productydetails?id=<%= item.pi_id %> ">

                    <div class="vc-pic">
                      <img src="<%= item.pi_img %> " alt="<%= item.pi_name %>" title="<%= item.pi_name %>" />
                    </div>
                    <div class="vc-text">
                      <p><%= item.pi_name %></p>
                    </div>
                  </a>
                </div>
              </li>
            </div>
            <% }) %>


          </div>
          <div class="swiper-button-next"></div>

          <div class="swiper-button-prev"></div>
        </div>
      </ul>
      <!-- TODO -->
      <!-- <div class="vc-left swiper-button-prev">
          <a href="javascript:;">
            <span><i class="icomoon icon-cheveron-left"></i></span>
          </a>
        </div>
        <div class="vc-right swiper-button-next">
          <a href="javascript:;">
            <span><i class="icomoon icon-cheveron-right"></i></span>
          </a>
        </div> -->
      <!-- <div class="swiper-button-next swiper-button-black"></div>
        <div class="swiper-button-prev swiper-button-black"></div> -->
    </div>
    <!-- 王宗辉复用使用的MORE按钮 -->
    <div class="nav_button_wang">
      <a href="/project?id=0">
        <button class="nav_button">MORE</button>

      </a>
    </div>
  </div>
</div>
<!-- <div class="air">
      <div class="icon-airplane1"></div>
    </div> -->
<!-- 革新时代开启 -->
<section class="section_list_wang">
  <div class="column_gexing container-fluid">
    <div class="row">
      <div class="nav_list_gen col-xs-12">
        <span></span>
        <h1>革新时代的先驱</h1>
        <p>十万企业用户共同的选择，查看更多</p>
      </div>
    </div>
  </div>
  <!-- 无人驾驶的开始  -->
  <div class="container">
    <div class="nav_list_wuren">
      <ul class="row nav_wuren">
        <li class="col-lg-2 col-md-2 hidden-xs hidden-md hidden-sm">
          <div><i class="icon_wangchao"></i></div>
          <p>无人驾驶</p>
        </li>
        <li class="col-lg-2 col-md-2 hidden-xs hidden-sm hidden-md">
          <div><i class="icon_wangchao"></i></div>
          <p>办公效率</p>
        </li>
        <li class="col-lg-2 col-md-2 hidden-xs hidden-sm hidden-md">
          <div><i class="icon_wangchao"></i></div>
          <p>响应式布局</p>
        </li>
        <li class="col-lg-2 col-md-2 hidden-xs hidden-sm hidden-md">
          <div><i class="icon_wangchao"></i></div>
          <p>服务质量</p>
        </li>
        <li class="col-lg-2 col-md-2 hidden-xs hidden-sm hidden-md">
          <div><i class="icon_wangchao"></i></div>
          <p>信息安全</p>
        </li>
        <li class="col-lg-2 col-md-2 hidden-xs hidden-sm hidden-md">
          <div><i class="icon_wangchao"></i></div>
          <p>信息采集</p>
        </li>
      </ul>
      <div class="nav_button_wang">
        <button class="nav_button">MORE</button>
      </div>
    </div>
  </div>
</section>
<!-- <i class="air"></i> -->
<!-- test -->
<!-- 革新时代结束 -->
<!-- 多项技术专利开始 -->
<div class="num_technical">
  <!-- header标题开始 -->
  <div class="qfe_wrapper center">
    <div class="blue_border-top"></div>
    <h2 class="header_title">多项技术专利</h2>
    <p class="header_subtitle">最领先的人脸识别应用场景</p>
  </div>
  <!-- header标题结束 -->
  <!-- 公司人员分布模块开始 -->
  <div class="employee_category w">
    <ul class="employee_category-list w">
      <li>
        <!-- <div class="employee_category-content"> -->
        <div class="employee_category-content-row">
          <div class="employee_category-content-number">2000</div>
          <div class="employee_category-content-text">+名</div>

          <div class="employee_category-content-blue">研发工程师</div>
        </div>
      </li>
      <li>
        <div class="employee_category-content-row">
          <div class="employee_category-content-number">1400</div>
          <div class="employee_category-content-text">+项</div>
          <div class="employee_category-content-blue">技术专利</div>
        </div>
      </li>
      <li>
        <div class="employee_category-content-row">
          <div class="employee_category-content-number">200</div>
          <div class="employee_category-content-text">+条</div>
          <div class="employee_category-content-blue">自动化生产线</div>
        </div>
      </li>
      <li>
        <div class="employee_category-content-row">
          <div class="employee_category-content-number">80</div>
          <div class="employee_category-content-text">+条</div>
          <div class="employee_category-content-blue">自动化生产线</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="employee_category-bgc"></div>
  <!-- 公司人员分布模块结束 -->
</div>
<!-- 多项技术专利结束 -->

<!-- 双目深度学习开始 -->
<section>
  <div class="column_gexing container-fluid">
    <div class="row">
      <div class="nav_list_gen col-xs-12">
        <span></span>
        <h1>双目深度学习</h1>
        <p>让生活跟社会更安全</p>
      </div>
    </div>
  </div>
  <!-- 08-24 设计行业-->
  <!-- article -->
  <div class="container">
    <div class="aside_navlist row">
      <div class="aside_navlist_sheji col-lg-6 col-md-6 col-xs-12 col-sm-12">
        <span><%= article[0].article_date %></span>
        <a href="/article?id=<%= article[0].article_id %>" id="index_article_to">
          <div class="aside_navlist_shenji_list"><%= article[0].article_name %> </div>

          <p class="article_tit"><%= article[0].article_title %></p>
          <!-- <p>
          “年会设计图，客户要求背景色是灰色、字是黄色”
          <br />
          “为什么？”设计师问道
        </p> -->
          <div class="aside_navlist_img_parent">
            <img src="<%= article[0].article_pic %>" alt="" width="475px" height="240px" />
          </div>
          <div class="aside_navlist_shenji_nav">
            <a class="aside_navlist_shenji_a_one" href="#">——</a>
            <a class="aside_navlist_shenji_a_two" href="#">|</a>
            <!-- <i class="glyphicon glyphicon-plus"></i> -->
          </div>
        </a>
      </div>
      <!-- 另一半 -->


      <!-- 循环来做 -->



      <div class="section_navlist col-lg-6 col-md-6 col-xs-12 col-sm-12">
        <% article.forEach(item => { %>
        <div class="section_navlist_rangda">
          <div><%= item.article_name %> </div><span class="span_one"><%= item.article_date %></span>
          <p><%= item.article_title %></p>
          <a href="/article?id=<%= item.article_id %>"><span class="span_two"> </span><i class="icon_wang"></i></a>
        </div>
        <% }) %>
      </div>
</section>

<!-- 为企业提供安全解决方案模块开始 -->
<div class="AI_solution">
  <!-- header标题开始 -->
  <div class="qfe_wrapper center">
    <div class="blue_border-top"></div>
    <h2 class="header_title">为企业提供安全解决方案</h2>
    <p class="header_subtitle">十万企业用户的共同选择，查看更多</p>
  </div>
  <!-- header标题结束 -->
  <!-- 赞助DEMO开始 -->
  <div class="solution_sponsor w">
    <ul class="solution_sponsor_img">
      <li><img src="/index/uploads/Geek+.webp" alt="" /></li>
      <li><img src="/index/uploads/HorRob.webp" alt="" /></li>
      <li><img src="/index/uploads/rokid.webp" alt="" /></li>
      <li><img src="/index/uploads/dajiang.webp" alt="" /></li>
      <li><img src="/index/uploads/infinove.webp" alt="" /></li>
      <li><img src="/index/uploads/kedaxunfei.webp" alt="" /></li>
      <li><img src="/index/uploads/baidu.webp" alt="" /></li>
      <li><img src="/index/uploads/Ali.webp" alt="" /></li>
    </ul>
  </div>
  <!-- 赞助DEMO结束 -->
</div>
<!-- 为企业提供安全解决方案模块结束 -->
</div>
</div>
<!-- 用户如何评价我们 模块 开始 -->
<div class="user_evaluation">
  <div class="user_evaluation_content">
    <!-- header标题开始 -->
    <div class="qfe_wrapper center">
      <div class="blue_border-top"></div>
      <h2 class="header_title">用户如何评价我们</h2>
      <p class="header_subtitle">让生活和社会更安全</p>
    </div>
    <!-- 用户如何评价我们
让生活和社会更安全 -->
    <!-- header标题结束 -->
    <!-- 用户评价内容模块开始 -->
    <!-- 第一个板块 -->
    <div class="coverInfo container ">
      <div class="swiper ">
        <div class="swiper-wrapper" style="margin: 0;">

          <div class="swiper-slide" id="pic_fir" style="width: 100%!important;float: left;">
            <div style="float: left;width: 10%;margin-right: 60px;"><img src="index/uploads/humsec.webp"
                class="img_div"></div>
            <div style="float: left;width: 64%;">
              <div class="row">
                <span style="color: #fff;font-size:22px;font-family:微软雅黑;float: left;margin-bottom: 10px;">技术工程师</span>
              </div>
              <div class="row">
                <span style="color: #fff; letter-spacing:0px;line-height: 1.95em;font-family:'微软雅黑'">
                  起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，
                  还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。
                </span>
              </div>
            </div>
          </div>


          <div class="swiper-slide " id="pic_sec" style="width: 100%;float: left;">
            <div style="float: left;width: 10%;margin-right: 60px;"><img src="index/uploads/humfir.webp"
                class="img_div"></div>
            <div style="float: left;width: 64%;">
              <div class="row">
                <span style="color: #fff;font-size:22px;font-family:微软雅黑;float: left;margin-bottom: 10px;">技术工程师</span>
              </div>
              <div class="row">
                <span style="color: #fff; letter-spacing:0px;line-height: 1.95em;font-family:'微软雅黑'">
                  起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，
                  还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。
                </span>
              </div>
            </div>
          </div>


        </div>
        <div
          class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
          style="margin:0;bottom: 21%;left: 2%;">
          <span class="swiper-pagination-bullet swiper-pagination-bullet-active" id="spot_first"></span>
          <span class="swiper-pagination-bullet" id="spot_second"></span>
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
      </div>
    </div>
    <!-- 第二个板块 -->





  </div>
</div>
<!-- 用户评价内容模块结束 -->
<!-- 用户如何评价我们 模块 结束 -->
<!-- </section> -->
<!-- 双目深度学习结束 -->
<%- include('common/footer.html') %>
<script src="/index/lib/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.swiper', {
    slidesPerView: 3,
    // direction: getDirection(),
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',

    },
    on: {
      resize: function () {
        swiper.changeDirection(getDirection());
      },
    },
  });

  function getDirection() {
    var windowWidth = window.innerWidth;
    var direction = window.innerWidth <= 760 ? 'vertical' : 'horizontal';

    return direction;
  }
  var mySwiper = new Swiper(".mybannerSwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    // NEWBanner
  });
</script>
<style type="text/css">
  .swiper {
    --swiper-theme-color: #ff6600;
    /* 设置Swiper风格 */
    --swiper-navigation-color: #333;
    /* 单独设置按钮颜色 */
    --swiper-navigation-size: 50px;
    /* 设置按钮大小 */
  }
</style>
</body>

</html>
<script>
  var spot_first = document.getElementById("spot_first");
  var spot_second = document.getElementById("spot_second");
  var pic_fir = document.getElementById("pic_fir");
  var pic_sec = document.getElementById("pic_sec");
  spot_first.onclick = function () {
    spot_first.style.background = '#5C697C';
    spot_second.style.background = '#CCCCCC';
    pic_fir.style.cssText =
      "transform:translateX(0%);-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transition: all 0.45s linear;"
    pic_sec.style.cssText =
      "transform:translateX(0%);-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transition: all 0.45s linear;"

  }
  spot_second.onclick = function () {
    spot_first.style.background = '#CCCCCC';
    spot_second.style.background = '#5C697C';

    pic_fir.style.cssText =
      "transform:translateX(-100%);-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transition: all 0.45s linear;"
    pic_sec.style.cssText =
      "transform:translateX(-100%);-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transition: all 0.45s linear;"
  }
</script>